<template>
    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
       <div class="slide-img">
           <a :href="slides[nowIndex].href">
               <transition name="slide-trans">
                   <img v-if="isShow" :src="slides[nowIndex].src" >
               </transition>
               <transition name="slide-trans-old">
                   <img v-if="isShow" :src="slides[nowIndex].src" >
               </transition>
           </a>
       </div>
       <h2>{{slides[nowIndex].title}}</h2>
       <ul class="slide-pages clear">
           <li class="on"><a @click="goto(prevIndex)" href="javascript:;" >&lt;</a></li>
           <li v-for="(item,index) in slides">
               <a :class="{on:index===nowIndex}" @click="goto(index)" href="javascript:;">{{index+1}}</a>
           </li>
           <li><a @click="goto(nextIndex)" href="javascript:;" >&gt;</a></li>
       </ul>
    </div> 
</template>
<script>
 export default{
     props:{
         slides:{
             type:Array,
             default:[]
         },
         inv:{
             type:Number,
             default:1000
         }
     },
     data(){
         return{
            nowIndex:0,
            isShow:true
         }
     },
     computed:{
         prevIndex(){
            if(this.nowIndex===0){
                return this.slides.length-1
            }else{
                return this.nowIndex-1
            }
         },
         nextIndex(){
            if(this.nowIndex===this.slides.length-1){
                return 0
            }else{
                return this.nowIndex+1
            }
         }
     },
     methods:{
        goto:function(index){
            this.isShow = false
            setTimeout(()=>{
                this.nowIndex = index
                this.isShow = true
                this.$emit('onchange',index)
            },10)
        },
        runInv(){
            this.invId = setInterval(()=>{
                this.goto(this.nextIndex)
            },this.inv);
        },
        clearInv(){
            clearInterval(this.invId);
        }
     },
     mounted(){
       this.runInv()
     }
 }   
</script>
<style scoped>
    .slide-show{
        width:100%;
        height: 367px;
        position: relative;
        overflow: hidden;
    }
    .slide-img,.slide-img{
        width:2000px;
    }
    .slide-img,.slide-img a img{
        height: 367px;
        display: block;
        float: left;
    }

    .slide-show h2{
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,.4);
        color: #fff;
        font-size: 20px;
        display: block;
        padding:10px 15px;
    }

    .slide-pages{
        position: absolute;
        right: 10px;
        bottom:20px;
    }
    .slide-pages li{
        padding: 5px;
        float: left;
        text-align: center;
        line-height: 25px;
    }
    .slide-pages li a.on{
        text-decoration: underline;
    }
    .slide-pages li a{
        width: 25px;
        display:inline-block;
        float: left;
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        background: rgba(0,0,0,.4);
        color:#fff;
        margin-right: 10px;
    }
    .slide-pages li a:last-child{
    margin-right: 0;
    }

    /*动画  */
    .slide-trans-enter-active{
        transition:all .5s;
    }
    .slide-trans-enter{
        transform: translateX(900px);
    }
    .slide-trans-old-leave-active{
        transform:  translateX(-900px);
    }

</style>
